<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Claude Code - AI 编程助手</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .step-card {
            position: relative;
            overflow: hidden;
        }
        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(to bottom, #6e8efb, #a777e3);
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: rgba(110, 142, 251, 0.3);
            z-index: -1;
            transform: skew(-15deg);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32 px-4">
        <div class="max-w-5xl mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Claude <span class="highlight">Code</span></h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8 opacity-90">用自然语言生成代码，让开发更简单</p>
            <p class="text-lg max-w-2xl mx-auto mb-10 opacity-80">专为开发者和技术爱好者设计的 AI 编程工具，通过简单描述即可自动生成、部署前端项目和小型应用</p>
            <a href="https://www.anthropic.com/claude-code" target="_blank" class="inline-block bg-white text-indigo-600 font-semibold px-8 py-3 rounded-lg shadow-lg hover:bg-gray-100 transition duration-300">
                访问官网 <i class="fas fa-external-link-alt ml-2"></i>
            </a>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-serif">核心<span class="highlight">功能</span></h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-code"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自然语言生成代码</h3>
                    <p class="text-gray-600">用户只需用中文描述需求，Claude Code 即可自动生成对应的前端项目或网页。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">一键自动部署</h3>
                    <p class="text-gray-600">生成的项目可自动部署，无需手动配置服务器或环境。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">支持多种项目类型</h3>
                    <p class="text-gray-600">涵盖个人主页、带登录注册的应用、简单自动化网页等多种场景。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-terminal"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">命令行操作友好</h3>
                    <p class="text-gray-600">通过命令行即可完成全部操作，适合 Windows 用户。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">AnyRouter 平台集成</h3>
                    <p class="text-gray-600">支持通过 AnyRouter 进行 API 调用和额度管理。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                    <div class="text-indigo-500 text-3xl mb-4">
                        <i class="fas fa-language"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">全中文支持</h3>
                    <p class="text-gray-600">专为中国大陆用户设计，降低语言门槛。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 bg-gray-100 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 font-serif">优势与<span class="highlight">特色</span></h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-bold mb-4 text-indigo-600">开发效率提升</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>无需复杂配置，极大简化了从需求到上线的流程</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>全中文支持，降低语言门槛</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>适合中小型项目或原型开发</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-bold mb-4 text-indigo-600">平台整合</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>结合 AnyRouter 平台，提供额度管理和 API 安全性</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>新用户注册 AnyRouter 可获 100 美元额度</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-3"></i>
                            <span>暂无强制付费门槛，适合体验和小规模使用</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Flowchart -->
    <section class="py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-serif">使用<span class="highlight">流程图</span></h2>
            <div class="mermaid bg-white p-8 rounded-xl shadow-sm">
                graph TD
                    A[描述需求] --> B[生成代码]
                    B --> C[自动部署]
                    C --> D[项目上线]
                    A --> E[命令行操作]
                    E --> F[集成 AnyRouter]
                    F --> G[API 管理]
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-16 bg-gray-100 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 font-serif">快速<span class="highlight">开始</span></h2>
            
            <div class="grid md:grid-cols-2 gap-8 mb-16">
                <div class="step-card bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-bold mb-4 text-indigo-600">1. 注册 GitHub 账号</h3>
                    <p class="mb-6">访问 <a href="https://github.com" target="_blank" class="text-indigo-500 hover:underline">github.com</a> ，点击 `Sign up` 注册</p>
                    <p>按提示填写信息，完成注册</p>
                </div>
                <div class="step-card bg-white p-8 rounded-xl shadow-sm">
                    <h3 class="text-xl font-bold mb-4 text-indigo-600">2. 注册 AnyRouter 账号</h3>
                    <p class="mb-2">访问 <a href="https://anyrouter.top/register?aff=3mm8" target="_blank" class="text-indigo-500 hover:underline">AnyRouter 注册页面</a></p>
                    <p class="mb-2">使用 GitHub 账号授权注册</p>
                    <p>注册成功后会获得 100 美元额度</p>
                </div>
            </div>

            <div class="bg-white p-8 rounded-xl shadow-sm mb-16">
                <h3 class="text-xl font-bold mb-6 text-indigo-600">3. 安装 Node.js</h3>
                <h4 class="font-bold mb-4">Windows 用户操作步骤：</h4>
                <ol class="list-decimal pl-6 space-y-3 mb-6">
                    <li>访问 <a href="https://nodejs.org/zh-cn" target="_blank" class="text-indigo-500 hover:underline">Node.js 官网</a></li>
                    <li>下载 LTS 版本（推荐）</li>
                    <li>双击安装包，按提示完成安装</li>
                    <li>安装完成后，打开命令行，输入：</li>
                </ol>
                <div class="code-block p-4 rounded mb-6">
                    <code>node --version</code>
                </div>
                <p>如果能看到版本号，说明安装成功</p>
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752734418295-2b1d567f-153a-430b-8932-c51291581bbf.png" alt="Node.js安装验证" class="mt-4 rounded-lg shadow border border-gray-200">
            </div>

            <div class="bg-white p-8 rounded-xl shadow-sm mb-16">
                <h3 class="text-xl font-bold mb-6 text-indigo-600">4. 安装 Claude Code</h3>
                <p class="mb-4">在命令行输入以下命令，安装 Claude Code：</p>
                <div class="code-block p-4 rounded mb-6">
                    <code>npm install -g @anthropic-ai/claude-code</code>
                </div>
                <p>安装成功后，查看是否安装成功</p>
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752734443926-5ee92125-6a88-4d18-8286-4d54778629b4.png" alt="Claude Code安装验证" class="mt-4 rounded-lg shadow border border-gray-200">
            </div>

            <div class="bg-white p-8 rounded-xl shadow-sm">
                <h3 class="text-xl font-bold mb-6 text-indigo-600">5. 配置 Claude Code</h3>
                <ol class="list-decimal pl-6 space-y-4">
                    <li>登录 AnyRouter，获取你的 `sk-xxx` 密钥</li>
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752734493634-6223e9ab-12ca-4c35-8ba3-1a6145cd67f1.png" alt="AnyRouter密钥获取" class="my-4 rounded-lg shadow border border-gray-200">
                    <li>在命令行输入以下命令设置环境变量（每次新开命令行都要设置，建议写入批处理文件）：</li>
                    <div class="code-block p-4 rounded my-4">
                        <code>set ANTHROPIC_AUTH_TOKEN=sk-xxx<br>set ANTHROPIC_BASE_URL=https://anyrouter.top</code>
                    </div>
                    <p class="text-sm text-gray-500">Windows需要配置环境变量</p>
                    <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752734588759-06d518f0-3493-44e8-a95c-d7e6c9148153.png" alt="环境变量设置" class="mt-4 rounded-lg shadow border border-gray-200">
                </ol>
            </div>
        </div>
    </section>

    <!-- Quick Start Section -->
    <section class="py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-serif">快速<span class="highlight">体验</span></h2>
            <div class="bg-white p-8 rounded-xl shadow-sm">
                <p class="mb-6">打开命令行输入claude 就可以进入claude。</p>
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752739763854-a6125969-8b9e-4e77-8440-8498aeeec7d4.png" alt="Claude命令行界面" class="rounded-lg shadow border border-gray-200 mb-8">
                
                <div class="space-y-12">
                    <div>
                        <h3 class="text-xl font-bold mb-4 text-indigo-600">一句话生成网站</h3>
                        <p class="mb-4">在命令行输入：</p>
                        <div class="code-block p-4 rounded mb-4">
                            <code>claude code "帮我生成一个简单的个人主页"</code>
                        </div>
                        <p>等待 Claude Code 自动生成并部署网站</p>
                        <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1752740062968-c854f3f6-0e32-48f7-b44f-ee862d67c9ce.png" alt="生成网站示例" class="mt-4 rounded-lg shadow border border-gray-200">
                    </div>
                    
                    <div>
                        <h3 class="text-xl font-bold mb-4 text-indigo-600">简单网页自动化</h3>
                        <p>目前 Claude Code 支持部分网页自动化，但图片上传等功能还不完善。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>